<script setup lang="ts" name="UserAvatar">
import { storeToRefs } from 'pinia'
import { propTypes } from '@/utils/propTypes'
import { ProfileApi } from '@/api/system/user/profile'
import { useUserStore } from '@/store/modules/user'

defineProps({
  avatar: propTypes.string.def('')
})

const userStore = useUserStore()
const { user } = storeToRefs(userStore)


const cropperRef = ref()
const handelUpload = async (data) => {
  await ProfileApi.uploadAvatar(user.value?.id!, data.url)
  cropperRef.value.close()
  userStore.setUserAvatarAction(data.url)
}
</script>

<template>
  <div class="change-avatar">
    <CropperAvatar ref="cropperRef" :showBtn="false" :value="avatar" width="120px" @change="handelUpload" />
  </div>
</template>

<style lang="scss" scoped>
.change-avatar {
  padding: var(--el-space);
  overflow: hidden;
  line-height: 0;
}
</style>
